<template>
  <button @click="show = !show">改变</button>
  <!-- 1. 使用transition组件包裹需要执行动画的元素 -->
  <!-- 2. 使用了transition组件包裹之后，会自动的在适当的时机给元素添加上6个类名 -->
  <!-- v-enter-from: 进入前  v-enter-to: 进入后  v-enter-active: 整个进入的过程 -->
  <!-- v-leave-from: 离开前  v-leave-to: 离开后  v-leave-active: 整个离开的过程 -->
  <Transition
    name="aa"
    enter-active-class="animate__animated animate__bounceInDown"
    leave-active-class="animate__animated animate__bounceOutUp"
  >
    <div v-show="show">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod reiciendis
      optio placeat fugit suscipit nobis blanditiis magni at. Fugiat vero
      laborum libero veniam sed nulla, laudantium rerum incidunt aperiam iusto,
      impedit aut maiores. Numquam voluptatibus itaque voluptas eius, ipsa sequi
      nam veniam porro deleniti dicta magnam impedit quos cum voluptate!
    </div>
  </Transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const show = ref(true)
    return {
      show
    }
  }
}
</script>

<style scoped>
div {
  width: 400px;
  /* background-color: pink; */
}
/* @keyframes shan {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
} */
/* .aa-enter-active  .aa-leave-active */
/* .aa-enter-active {
  animation: shan 0.3s;
} */
/* .aa-leave-active {
  animation: shan 0.3s reverse;
} */
</style>
